<template>
  <el-select v-model="pressId" filterable remote reserve-keyword placeholder="请选择"
             :remote-method="remoteMethod"
             :loading="loading" @change="setPressId" clearable>
    <el-option
      v-for="item in pressList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
import * as press from '@/api/press'

export default {

  data() {
    return {
      pressList: [],
      pressId: '',
      loading: false
    }
  },

  created() {
    this.fetchData()
    console.log("pressId",this.pressId)
  },

  methods: {

    async fetchData() {
      const {data} = await press.search({}, 1, 0)
      this.pressList = data.rows
    },

    remoteMethod(name) {
      if (name !== '') {
        this.loading = true
        setTimeout(() => {
          console.log("this.loading", this.loading)
          this.loading = false
          const query = {"name": name}
          press.search(query, 1, 0).then(response => {
            if (response.code === 20000) {
              this.pressList = response.data.rows
            } else {
              this.pressList = []
            }
          })
        }, 500)
      } else {
        this.pressList = []
      }
    },
    setPressId(val){
      console.log(val)
      this.$emit('press-select',val)
    }
  }
}

</script>
